<template>
    <div class="app-container" >
      <el-row>
          <el-col :span="21" :offset="1">
              <el-button icon="el-icon-circle-plus" @click="showAddDialog" size="small"  type="primary">添加</el-button>

              <el-table :data="spus" border style="width: 100%; margin-top: 8px">

                <el-table-column prop="id" label="ID" width="60">
                </el-table-column>

                <el-table-column width="150" label="图片">
                  <template v-slot="scope">
                    <img
                    style="width: 100px;  height: 100px"
                    :src= "scope.row.img"
                    alt=""
                    >
                    <img>
                  </template>  
                </el-table-column>

                <el-table-column prop="title" label="标题">      
                </el-table-column>

                <el-table-column prop="subtitle" label="副标题">  
                </el-table-column>

                <el-table-column prop="price" label="价格">
                </el-table-column>

                <el-table-column prop="online" label="是否上架">
                  <template slot-scope="scope">
                    {{scope.row.online == '1' ? '是' : '否'}}
                  </template>
                </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      @click="editSpu(scope.row.id)"
                      type="info"
                      icon="el-icon-edit"
                      size="mini"
                      >编辑</el-button
                    >
                    <el-button
                      @click="delSpu(scope.row.id)"
                      type="danger"
                      icon="el-icon-delete"
                      size="mini"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页数据 -->
              <el-pagination
                style="margin-top: 12px"
                background
                layout="prev, pager, next"
                :page-size="5"
                :current-page="current"
                @current-change="goto"
                :total="total"
              >
              </el-pagination>
          </el-col>
      </el-row>
    </div>
  </template>
    
  <script>
  import http from '@/utils/request.js'


  export default {
    data() {
      return {
        permission: [],
        spus: [],
        total: 0,
        current: 1,
      }
    },
    created(){
      this.current = this.$route.query.current
    },
    mounted() {
      this.permission = this.$route.meta.permission
      this.goto(this.current)
    },
    methods:{
      goto(val = 1) {
        http.get(`spu?page=${val}`).then(res => {
          this.spus = res.data
          this.total = res.total
          this.current = res.current
        })
      },
      showAddDialog() {
        this.$router.push({
          path: './spu-add',  
          query: {current:this.current}    
        }) 
      },
      async delSpu(id) {
      try {
        // 对于this.confirm() 使用 await等待的时候，用户点击取消，是通过抛异常的方式
        await this.$confirm("你确定要删除这条数据吗?", "警告", {
          confirmButtonText: "yes",
          cancelButtonText: "no",
          closeOnClickModal: false,
          type: "success",
        });
        // 代码如果能够走下来表示用户点击了确认按钮
        // 删除用户
        await http.delete(`spu/${id}`);
        this.$message({ message: "删除成功", type: "success", duration: 1000 });
        this.refresh();
      } catch (err) {
        // 代码如果进入了 catch块，表示用户点击了取消按钮
        console.log(err);
      }
    },
    editSpu(id) {  
      this.$cookies.set('spuId',id) 
      this.$router.push({
          path: './spu-edit',
          query: {id: id,current:this.current}
        }) 
    },
      refresh() {
      this.goto(this.current);
    }
    }
  }
  </script>

  <style>
  
  </style>
  